<template>
  <div>
    <!--预约挂号-->
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>预约详情</h1>
      </div>
      <br />
    </div>

    <div class="hzxx">
      <p>患者信息</p>
      <el-card class="box-card">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="患者姓名">
              <el-input
                v-model="thepatient.name"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input
                v-model="thepatient.documentType"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>

            <el-form-item label="就诊人地址">
              <el-input
                v-model="thepatient.address"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="就诊卡号">
              <el-input
                v-model="thepatient.hospitalNumber"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="thepatient.number"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="thepatient.phone"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="患者头像">
              <el-input
                v-model="thepatient.name"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="关系">
              <el-input
                v-model="thepatient.relation"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <div class="yyxx">
      <p>预约信息</p>
      <el-card class="box-card" style="height:400px;">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="就诊医院">
              <el-input
                v-model="campus.campusName"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="就诊医生">
              <el-input
                v-model="doctor.doctorName"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="门诊时间">
              <el-input
                v-model="waitingrecord.createTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="预约时间">
              <el-input
                v-model="nucleicacid.createTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="医院地址">
              <el-input
                v-model="campus.campusAddress"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="医生职称">
              <el-input v-model="doctor.jobTitle" style="width:250px;" disabled>
              </el-input>
            </el-form-item>
            <el-form-item label="候诊时间">
              <el-input
                v-model="waitingrecord.houzhenTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-input
                v-model="nucleicacid.state"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="就诊科室">
              <el-input
                v-model="divisiontype.divisionName"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="检测费">
              <el-input
                v-model="nucleicacid.cost"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="anniu">
          <el-button type="primary" plain @click="quxiao">确定</el-button>
          <el-button
            type="primary"
            plain
            @click="add"
            v-if="nucleicacid.state == '未检测'"
            >添加核酸报告</el-button
          >
        </div>
      </el-card>
    </div>

    <!-- 添加用户区域 -->
    <el-col :span="2">
      <el-dialog
        title="添加"
        :visible.sync="showCreateUser"
        :close-on-click-modal="false"
      >
        <el-form label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="result"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="showCreateUser1">取消</el-button>
            <el-button @click="clickAdd">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-col>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      nucleicacid: [],
      thepatient: [],
      doctor: [],
      waitingrecord: [],
      divisiontype: [],
      campus: [],
      showCreateUser: false,

      result: ""
    };
  },
  created() {
    //接收id
    this.id = localStorage.getItem("id");
    //  alert( this.id)
    //页面渲染之前执行，一般调用methods定义的方法
    this.getByIdnucleicacid();
  },
  methods: {
    getByIdnucleicacid() {
      this.$axios
        .get("/user/user/user/getByIdnucleicacid/" + this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.nucleicacid = res.data.data.nucleicacid;
            this.thepatient = res.data.data.hsThePatient;
            this.doctor = res.data.data.hsdocrot;
            this.waitingrecord = res.data.data.hsWaitingRecord;
            this.divisiontype = res.data.data.hsDivisionType;
            this.campus = res.data.data.hsCampus;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    quxiao() {
      this.$router.push("/hesuan");
    },
    add() {
      this.result = "";
      this.showCreateUser = true;
    },
    clickAdd(){
      this.addnucleicReport();
      this.updatehsState();
    },
    //添加
    addnucleicReport() {
      // console.log(this.bloodCellsReference);
      this.$axios
        .post("/record/record/nucleic-report/addnucleicReport", {
          ofPatientId: this.thepatient.id,
          districtId: this.divisiontype.id,
          result: this.result
        })
        .then(res => {
          if (res.data.code == 20000) {
            this.result = "";
            this.showCreateUser = false;
            this.$message.success(res.data.data.ok);
          } else {
            this.$message.error(res.data.data.error);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //修改
    updatehsState() {
      console.log(this.nucleicacid.id);
      this.$axios
        .post("/appointment/appointment/nucleic-acid/updatehsState", {
          id: this.nucleicacid.id,
        })
        .then(res => {
          if (res.data.code == 20000) {
            this.$message.success(res.data.data.ok);
          } else {
            this.$message.error(res.data.data.error);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    showCreateUser1() {
      this.dishesForm = {};
      this.showCreateUser = false;
    }
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}
.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}
.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  height: 260px;
}
.hzxx {
  background-color: #e6e6e6;
}
.hzxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}
.hzxx_box1 {
  width: 300px;
  float: left;
}
.hzxx_box2 {
  float: left;
  margin-left: 100px;
}
.yyxx {
  background-color: #e6e6e6;
}
.yyxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}
.anniu {
  width: 400px;
  height: 50px;
  margin-left: 100px;
  margin-top: 320px;
}
</style>
